<template>
  <u-toast ref="uToast"></u-toast>
  <u-navbar :autoBack="true" :safeAreaInsetTop="true" :placeholder="true">
    <!-- <template #right>
      <view @click="SkipModel = true">跳过</view>
    </template> -->
  </u-navbar>
  <view class="certification">
    <view class="Title">实名认证</view>
    <view class="From">
      <view class="IDCard_text">
        <view class="flex_al_cen_ju_bet">
          <view class="label">姓名</view>
          <u-input placeholder="请输入真实姓名" inputAlign="left" border="none" type="text" v-model="User.name"></u-input>
        </view>
        <view class="flex_al_cen_ju_bet">
          <view class="label">身份证号</view>
          <u-input placeholder="请输入18位身份证号" inputAlign="left" border="none" type="idcard" v-model="User.idCard"></u-input>
        </view>
      </view>
      <!-- 身份证图片 -->
      <view class="IDCard_IMG">
        <view class="Title">上传身份证正反面照片</view>
        <!-- 身份证 -->
        <view class="card">
          <view class="flexs">
            <view class="card-title">
              <view>头像面</view>
              <view>上传身份证头像面</view>
            </view>
            <view class="card-item">
              <view class="card-item-left" style="position: relative">
                <u-upload @afterRead="idCardFrontAfterRead" name="6" :fileList="frontView" :maxCount="1" width="250"
                  height="178rpx">
                  <view class="img">
                    <image v-if="User.headFace !== ''" :src="User.headFace" mode="aspectFit"></image>
                    <image v-if="User.headFace == ''" src="../../static/images/pulice/idCardFrontImg.png"
                      mode="aspectFit">
                    </image>
                  </view>
                </u-upload>
              </view>
            </view>
          </view>
          <view class="flexs">
            <view class="card-title">
              <view>国徽面</view>
              <view>上传身份证国徽面</view>
            </view>
            <view class="card-item">
              <view class="card-item-left">
                <u-upload @afterRead="idCardBackAfterRead" :fileList="rearView" name="6" :maxCount="1" width="250"
                  height="178rpx">
                  <view class="img">
                    <image v-if="User.reverseCard !== ''" :src="User.reverseCard" mode="aspectFit"></image>
                    <image v-if="User.reverseCard == ''" src="../../static/images/pulice/idCardBackImg.png"
                      mode="aspectFit"></image>
                  </view>
                </u-upload>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="confirmChange" @click="Submit">提交</view>
  </view>
  <!-- 跳过模态框 -->
  <u-modal :show="SkipModel" title="确认跳过吗" confirmText="确定" :showCancelButton="true" cancelColor="#AAAAAA"
    confirmColor="#000" @cancel="SkipModel = false" @confirm="confirmSkipModel">
    <view style="color: #0c22b0">实名认证后才可以接单</view>
  </u-modal>
</template>
<script setup lang="ts">
import certification from "@/Hooks/Wode/certification";
import { getCurrentInstance, onMounted } from "vue"
const { proxy } = getCurrentInstance() as any;
const {
  SkipModel,
  rearView,
  frontView,
  User,
  idCardFrontAfterRead,
  idCardBackAfterRead,
  Submit,
  confirmSkipModel,

} = certification(proxy);
onMounted(() => {

  console.log(User)
})
</script>
<style scoped lang="scss">
@import "../../static/css/Wode/certification.scss";
</style>
